import { Button, Modal, Space } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { marketingApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { download } from '@/utils'

export default defineComponent({
  name: 'SelectXyGoods',
  props: {
    status: { type: [Number], default: 1 },
    goodsPlatform: { type: [Number], default: 0 }
  },
  emits: ['select'],
  setup(props, { emit }) {
    const tableRef = ref({} as ProTableRef)
    const showGoodsDlg = ref(false)
    const goodsCur = ref({} as any)
    const showSkuDlg = ref(false)
    const tableConfig = ref({
      fixedHeight: 600,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '商品名称',
              field: 'content',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '输入商品名称进行查询',
                  allowClear: true
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '商品ID',
            field: 'id',
            minWidth: 150
          },
          {
            title: '商品名称',
            minWidth: 150,
            field: 'name'
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await marketingApi.getUpGoodsList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                goodsPlatform: props.goodsPlatform,
                status: props.status,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    const skuTableConfig = ref({
      fixedHeight: false,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '规格ID',
            field: 'id',
            minWidth: 150
          },
          {
            title: '规格名称',
            minWidth: 150,
            field: 'name'
          },
          {
            title: '库存',
            field: 'stock'
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ],

        proxyConfig: {
          form: true,
          props: {
            result: 'data'
          },
          ajax: {
            query: async () => {
              const data = await marketingApi.getUpSkuList(goodsCur.value.id)
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //显示选择框
    function show() {
      showGoodsDlg.value = true
    }
    //轻姿颜
    const imgUrl = ref('')
    const goodsId = ref()
    const salePrice = ref()
    //选择规格
    function selectSku(row) {
      console.log(row)
      imgUrl.value = row.mainImg
      goodsId.value = row.id
      goodsCur.value = row
      salePrice.value = row.salePrice
      showSkuDlg.value = true
    }

    //确定
    function confirm(row) {
      console.log(row)
      emit('select', {
        goodsName: goodsCur.value.name,
        skuName: row.name,
        id: row.id,
        stock: row.stock,
        prizeUrl: imgUrl.value,
        erpSpecNo: row.erpSpecNo,
        goodsId: goodsId.value,
        salePrice: row.salePrice
      })
      showGoodsDlg.value = false
      showSkuDlg.value = false
    }

    return {
      goodsId,
      tableRef,
      tableConfig,
      skuTableConfig,
      showGoodsDlg,
      showSkuDlg,
      salePrice,
      imgUrl,

      selectSku,
      show,
      confirm
    }
  },
  render() {
    return (
      <div>
        <Modal
          v-model:visible={this.showGoodsDlg}
          title="商品选择"
          destroyOnClose
          width={900}
          footer={null}
        >
          <ProTable
            ref="tableRef"
            v-slots={{
              operation: ({ row }) => {
                return (
                  <Button
                    type="link"
                    size="small"
                    onClick={() => this.selectSku(row)}
                  >
                    选择规格
                  </Button>
                )
              }
            }}
            {...this.tableConfig}
          />
        </Modal>
        <Modal
          v-model:visible={this.showSkuDlg}
          title="规格选择"
          destroyOnClose
          width={700}
          footer={null}
        >
          <ProTable
            v-slots={{
              operation: ({ row }) => {
                return (
                  <Button
                    type="link"
                    size="small"
                    onClick={() => this.confirm(row)}
                  >
                    确定
                  </Button>
                )
              }
            }}
            {...this.skuTableConfig}
          />
        </Modal>
      </div>
    )
  }
})
